<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频上传测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .upload-area {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            margin: 20px 0;
            background-color: #f9f9f9;
        }
        .upload-area.dragover {
            border-color: #007bff;
            background-color: #e3f2fd;
        }
        .file-input {
            margin: 20px 0;
        }
        .upload-btn {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .upload-btn:hover {
            background-color: #0056b3;
        }
        .upload-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .progress {
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        .progress-bar {
            height: 100%;
            background-color: #007bff;
            width: 0%;
            transition: width 0.3s ease;
        }
        .result {
            margin: 20px 0;
            padding: 15px;
            border-radius: 5px;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .video-preview {
            margin: 20px 0;
            text-align: center;
        }
        .video-preview video {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }
        .info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <h1>视频上传到MinIO测试</h1>
    
    <div class="info">
        <h3>支持的功能：</h3>
        <ul>
            <li>支持多种视频格式：MP4, AVI, RMVB, MOV, WMV, FLV, WebM, MKV, M4V, 3GP, OGV</li>
            <li>文件大小限制：最大500MB</li>
            <li>自动视频优化（大文件自动压缩）</li>
            <li>拖拽上传支持</li>
        </ul>
    </div>

    <div class="upload-area" id="uploadArea">
        <p>拖拽视频文件到这里，或点击选择文件</p>
        <input type="file" id="fileInput" class="file-input" accept="video/*" multiple>
        <br>
        <button class="upload-btn" id="uploadBtn" onclick="uploadFiles()">上传视频</button>
    </div>

    <div class="progress" id="progressContainer" style="display: none;">
        <div class="progress-bar" id="progressBar"></div>
    </div>

    <div id="result"></div>
    <div id="videoPreview"></div>

    <script>
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const uploadBtn = document.getElementById('uploadBtn');
        const progressContainer = document.getElementById('progressContainer');
        const progressBar = document.getElementById('progressBar');
        const result = document.getElementById('result');
        const videoPreview = document.getElementById('videoPreview');

        let selectedFiles = [];

        // 拖拽上传功能
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('video/'));
            handleFiles(files);
        });

        // 文件选择
        fileInput.addEventListener('change', (e) => {
            handleFiles(Array.from(e.target.files));
        });

        // 点击上传区域选择文件
        uploadArea.addEventListener('click', () => {
            fileInput.click();
        });

        function handleFiles(files) {
            selectedFiles = files;
            if (files.length > 0) {
                uploadBtn.textContent = `上传 ${files.length} 个视频文件`;
                uploadBtn.disabled = false;
                
                // 显示文件信息
                let fileInfo = '<h3>选择的文件：</h3><ul>';
                files.forEach(file => {
                    fileInfo += `<li>${file.name} (${formatFileSize(file.size)})</li>`;
                });
                fileInfo += '</ul>';
                result.innerHTML = fileInfo;
            }
        }

        async function uploadFiles() {
            if (selectedFiles.length === 0) {
                showResult('请先选择视频文件', 'error');
                return;
            }

            uploadBtn.disabled = true;
            progressContainer.style.display = 'block';
            result.innerHTML = '';

            for (let i = 0; i < selectedFiles.length; i++) {
                const file = selectedFiles[i];
                await uploadSingleFile(file, i + 1, selectedFiles.length);
            }

            uploadBtn.disabled = false;
            uploadBtn.textContent = '上传视频';
        }

        async function uploadSingleFile(file, current, total) {
            const formData = new FormData();
            formData.append('file', file);

            try {
                showResult(`正在上传 ${file.name} (${current}/${total})...`, 'info');

                const response = await fetch('/uploadVideo', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                if (data.code === 200) {
                    showResult(`✅ ${file.name} 上传成功！<br>URL: <a href="${data.data.url}" target="_blank">${data.data.url}</a>`, 'success');
                    
                    // 显示视频预览
                    const videoElement = document.createElement('video');
                    videoElement.controls = true;
                    videoElement.src = data.data.url;
                    videoElement.style.margin = '10px';
                    videoPreview.appendChild(videoElement);
                } else {
                    showResult(`❌ ${file.name} 上传失败: ${data.msg}`, 'error');
                }
            } catch (error) {
                showResult(`❌ ${file.name} 上传失败: ${error.message}`, 'error');
            }

            // 更新进度条
            const progress = (current / total) * 100;
            progressBar.style.width = progress + '%';
        }

        function showResult(message, type) {
            const resultDiv = document.createElement('div');
            resultDiv.className = `result ${type}`;
            resultDiv.innerHTML = message;
            result.appendChild(resultDiv);
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
    </script>
</body>
</html>
